<template>
  <el-dialog :title="title" :visible.sync="showSelectUser" @close="close" width="70%"  append-to-body>
    <el-form ref="form" :model="formInfo" :rules="rules" label-width="120px">
      <el-form-item label="下场负责人" prop="xcfzrname">
        <el-input v-model="formInfo.xcfzrname" readonly @click.native="queryUser('fzr')"></el-input>
      </el-form-item>
      <el-form-item label="下场类型" prop="xclx">
        <el-select v-model="form.xclx" style="width: 100%;" placeholder="请选择">
          <el-option
            v-for="item in xclxList"
            :key="item.dictValue"
            :label="item.dictLabel"
            :value="item.dictValue">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="下场时间" prop="xcsj">
        <el-date-picker type="datetime"  value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择下场时间" v-model="formInfo.xcsj" style="width: 100%;"></el-date-picker>
      </el-form-item>
      <el-form-item label="下场人员">
        <el-input v-model="formInfo.xcryname" readonly @click.native="queryUser('xcr')"></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="xcbz">
        <el-input
          type="textarea"
          maxlength="1000"
          :autosize="{ minRows: 3, maxRows: 4 }"
          show-word-limit
          v-model="formInfo.xcbz"></el-input>
      </el-form-item>
    </el-form>
    <UserSelectModal v-if="showUser" :showUserDialog="showUser" :ryType="ryType" @close="closeUser" @selectUser="selectUser"></UserSelectModal>
    <div slot="footer" class="dialog-footer">
      <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="close">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import UserSelectModal from '@/views/components/user/UserSelectModal.vue'
import { updateYwd } from "@/api/gd/ywd";
export default {
  name: 'xcForm',
  components: { UserSelectModal },
  props: {
    showSelectUser: {
      type: Boolean
    },
    form: {
      type: Object
    },
  },
  data() {
    return {
      title: "",
      buttonLoading: false,
      showUser: false,
      formInfo: {},
      rules: {
        xcsj: [
          { required: true, message: "下场时间不能为空", trigger: "blur" }
        ]
      },
      xclxList: [],
      ryType: ''
    }
  },
  created() {
    if (this.form.zbbh !== undefined && this.form.kh !== undefined) {
      this.title = "总部编号为" + this.form.zbbh + "的" + this.form.kh + "下场安排"
    }else {
      this.title = '请选择下场人员'
    }

    this.formInfo = this.form
    // 是否回款
    this.getDicts("gd_xclx").then(res => {
      this.xclxList = res.data
    })
  },
  methods: {
    queryUser(type) {
      this.ryType = type
      this.showUser = true
    },
    close() {
      this.$emit("close")
    },
    closeUser() {
      this.showUser = false
    },
    selectUser(user, type) {
      let ids = user.map(item => item.userId)
      let names = user.map(item => item.nickName)
      // 判断当前选择的是下场负责人还是下场人员
      if (type === 'fzr') {
        this.formInfo.xcfzrid = ids.toString()
        this.formInfo.xcfzrname = names.toString()
      }else if (type === 'xcr') {
        this.formInfo.xcryid = ids.toString()
        this.formInfo.xcryname = names.toString()
      }
      this.closeUser()
    },
    // 修改数据
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.buttonLoading = true;
          this.formInfo.sfyxc = '2'
          this.formInfo.isLog = true
          if (this.formInfo.id !== null && this.formInfo.id !== undefined && this.formInfo.id !== '') {
            updateYwd(this.formInfo).then(response => {
              this.$modal.msgSuccess("已安排下场");
              this.$emit("xcryData", this.formInfo)
            }).finally(() => {
              this.buttonLoading = false;
              this.close()
            });
          }else {
            this.$emit("xcryData", this.formInfo)
          }

        }
      })

    }
  }
}
</script>

<style scoped>

</style>
